<template>
  <div class="test-container">
    <h1>输入组件功能测试</h1>

    <div class="test-section">
      <h2>基础输入类型</h2>
      <div class="test-grid">
        <div class="test-item">
          <h3>文本输入 (text)</h3>
          <xt-input v-model="textValue" type="text" placeholder="请输入文本" />
          <div class="value-display">值: {{ textValue }}</div>
        </div>

        <div class="test-item">
          <h3>数字输入 (number)</h3>
          <xt-input
            v-model="numberValue"
            type="number"
            placeholder="请输入数字" />
          <div class="value-display">值: {{ numberValue }}</div>
        </div>

        <div class="test-item">
          <h3>中文输入 (chinese)</h3>
          <xt-input
            v-model="chineseValue"
            type="chinese"
            placeholder="请输入中文" />
          <div class="value-display">值: {{ chineseValue }}</div>
        </div>

        <div class="test-item">
          <h3>英文输入 (english)</h3>
          <xt-input
            v-model="englishValue"
            type="english"
            placeholder="请输入英文" />
          <div class="value-display">值: {{ englishValue }}</div>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h2>格式验证输入</h2>
      <div class="test-grid">
        <div class="test-item">
          <h3>手机号输入 (mobile)</h3>
          <xt-input
            v-model="mobileValue"
            type="mobile"
            placeholder="请输入手机号" />
          <div class="value-display">值: {{ mobileValue }}</div>
        </div>

        <div class="test-item">
          <h3>邮箱输入 (email)</h3>
          <xt-input
            v-model="emailValue"
            type="email"
            placeholder="请输入邮箱" />
          <div class="value-display">值: {{ emailValue }}</div>
        </div>

        <div class="test-item">
          <h3>密码输入 (password)</h3>
          <xt-input
            v-model="passwordValue"
            type="password"
            placeholder="请输入密码" />
          <div class="value-display">值: {{ passwordValue }}</div>
        </div>

        <div class="test-item">
          <h3>金额输入 (money)</h3>
          <xt-input
            v-model="moneyValue"
            type="money"
            placeholder="请输入金额" />
          <div class="value-display">值: {{ moneyValue }}</div>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h2>特殊输入类型</h2>
      <div class="test-grid">
        <div class="test-item">
          <h3>多行文本 (textarea)</h3>
          <xt-input
            v-model="textareaValue"
            type="textarea"
            placeholder="请输入多行文本" />
          <div class="value-display">值: {{ textareaValue }}</div>
        </div>

        <div class="test-item full-width">
          <h3>混合输入 (mixed)</h3>
          <xt-input
            v-model="mixedValue"
            type="mixed"
            :options="mixedOptions"
            placeholder="请输入内容"
            select-width="120px" />
          <div class="value-display">值: {{ mixedValue }}</div>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h2>功能特性测试</h2>
      <div class="test-grid">
        <div class="test-item">
          <h3>禁用状态</h3>
          <xt-input
            v-model="disabledValue"
            type="text"
            placeholder="禁用输入框"
            disabled />
          <div class="value-display">值: {{ disabledValue }}</div>
        </div>

        <div class="test-item">
          <h3>清除功能</h3>
          <xt-input
            v-model="clearableValue"
            type="text"
            placeholder="可清除的输入框"
            clearable />
          <div class="value-display">值: {{ clearableValue }}</div>
        </div>

        <div class="test-item">
          <h3>字数限制</h3>
          <xt-input
            v-model="limitValue"
            type="text"
            placeholder="最多10个字符"
            :maxlength="10"
            show-word-limit />
          <div class="value-display">值: {{ limitValue }}</div>
        </div>

        <div class="test-item">
          <h3>自定义占位符</h3>
          <xt-input
            v-model="customPlaceholderValue"
            type="text"
            placeholder="自定义占位文本" />
          <div class="value-display">值: {{ customPlaceholderValue }}</div>
        </div>
      </div>
    </div>

    <div class="test-section">
      <h2>事件测试</h2>
      <div class="event-logs">
        <div class="log-item" v-for="(log, index) in eventLogs" :key="index">
          {{ log }}
        </div>
      </div>
      <div class="test-grid">
        <div class="test-item">
          <h3>输入事件</h3>
          <xt-input
            v-model="eventValue"
            type="text"
            placeholder="测试事件"
            @input="logEvent('input', $event)"
            @change="logEvent('change', $event)"
            @blur="logEvent('blur', $event)"
            @focus="logEvent('focus', $event)"
            @clear="logEvent('clear')" />
          <div class="value-display">值: {{ eventValue }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 基础输入类型
const textValue = ref('');
const numberValue = ref('');
const chineseValue = ref('');
const englishValue = ref('');

// 格式验证输入
const mobileValue = ref('');
const emailValue = ref('');
const passwordValue = ref('');
const moneyValue = ref('');

// 特殊输入类型
const textareaValue = ref('');
const mixedValue = ref({});

// 功能特性测试
const disabledValue = ref('已禁用的值');
const clearableValue = ref('可清除的值');
const limitValue = ref('');
const customPlaceholderValue = ref('');

// 事件测试
const eventValue = ref('');
const eventLogs = ref<string[]>([]);

// 混合输入选项
const mixedOptions = ref([
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' },
  { label: '选项3', value: 'option3', disabled: true },
  { label: '选项4', value: 'option4' },
]);

// 事件日志记录
const logEvent = (eventName: string, value?: any) => {
  const timestamp = new Date().toLocaleTimeString();
  const logMessage = `[${timestamp}] ${eventName}事件: ${
    value ? JSON.stringify(value) : '触发'
  }`;
  eventLogs.value.unshift(logMessage);

  // 保持日志数量不超过20条
  if (eventLogs.value.length > 20) {
    eventLogs.value.pop();
  }
};
</script>

<style scoped>
.test-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1 {
  text-align: center;
  color: #409eff;
  margin-bottom: 30px;
}

h2 {
  color: #606266;
  border-bottom: 2px solid #409eff;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

h3 {
  color: #409eff;
  margin-bottom: 10px;
  font-size: 14px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.test-item {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fafafa;
}

.full-width {
  grid-column: 1 / -1;
}

.value-display {
  margin-top: 10px;
  padding: 8px;
  background: #ecf5ff;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
  word-break: break-all;
}

.event-logs {
  height: 200px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 10px;
  background: #2c3e50;
  color: #42b983;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 12px;
}

.log-item {
  padding: 4px 0;
  border-bottom: 1px solid #34495e;
}

.log-item:last-child {
  border-bottom: none;
}
</style>
